<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>编辑文档备注</title>

    <link rel="stylesheet" th:href="@{/layui/css/layui.css}"/>
    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
</head>
<body>


<div style="height: 100%">
    <textarea id="layeditDemo" rows="30" th:text="${field}"></textarea>
</div>

<script th:src="@{/layui/layui.js}"></script>
<script th:src="@{/admin/js/jquery.js}"></script>
<script th:src="@{/ace/ace.js}"></script>
<script type="text/javascript" th:inline="javascript">
    var description = [[${description}]];
    var contentFunction = null;

    layui.use([
        'util', 'layer',
        'form',
        'layedit',
        'jquery'], function () {

        var $ = layui.jquery;
        var layer = layui.layer, layedit = layui.layedit;

        layedit.set({
             calldel: {
                url: 'your url',
                done: function (data) {
                    console.log(data);
                }
            }
            , autoSync: true
            , facePath: '/restdoc/layui/'
            , devmode: true
            , tool: [
                'undo', 'redo', 'code', 'strong', 'italic', 'underline', 'del', 'addhr', '|', 'fontFomatt', 'fontBackColor', 'colorpicker', 'face'
                , '|', 'left', 'center', 'right', '|', 'link', 'unlink', 'image_alt', 'attachment', 'anchors'
                , '|'

            ]
            , height: '400px'
        });

        var ieditor = layedit.build('layeditDemo');

        if (description != null && description !== '') {
            layedit.setContent(ieditor, description, false);
        }

        contentFunction = function () {
            return layedit.getContent(ieditor)
        }
    });

    function getValue() {
        return {
            "description": contentFunction()
        }
    }
</script>

</body>
</html>